<template>
    <div class="login">
        <div class="login-header"> </div>
        <div class="login-container">
            <div class="login-bg">
                <vue-particles
                    class="login-bg-canvas"
                    color="#3399ff"
                    :particleOpacity="0.7"
                    :particlesNumber="80"
                    shapeType="circle"
                    :particleSize="4"
                    linesColor="#66ccff"
                    :linesWidth="1"
                    :lineLinked="true"
                    :lineOpacity="0.4"
                    :linesDistance="150"
                    :moveSpeed="3"
                    :hoverEffect="true"
                    hoverMode="grab"
                    :clickEffect="true"
                    clickMode="push"
                >
                </vue-particles>
            </div>
            <div class="login-middle">
                <div class="login-right">
                    <div class="login-form-box" style="top: 10px; margin-top: 22.8476px;">
                        <h2 class="login-box-title">账号登录</h2>
                        <div class="form_wrap" style="display: block;">
                            <dl>
                                <dd><input class="r_input" type="text" v-model="submitData.username" placeholder="手机号/注册邮箱"></dd>
                            </dl>
                            <dl>
                                <dd class="r_input password">
                                    <input type="password"  v-model="submitData.password" placeholder="登录密码">
                                    <a href="#" class="forgot-password" target="_black">忘记密码</a>
                                </dd>
                            </dl>
                            <dl>
                                <dd>
                                    <input class="submit-btn" type="submit" v-on:click="submit" value="登   录">
                                </dd>
                            </dl>
                            <p class="agreement-list">登录即代表您同意我们的<a href="http://pages.ctrip.com/public/serve%20guideline.htm?1" class="serviceAgreement" target="_black">服务协议</a>和<a href="http://pages.ctrip.com/public/serve%20guideline.htm?2" class="privacyPolicy" target="_black">隐私政策</a></p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <nav-footer></nav-footer>
    </div>

</template>

<script>
    import NavFooter from "../components/navFooter";
    import { userLogin, isLogin } from "../api/user";
    import router from "../router";

    export default {
        name: "Login",
        components: { NavFooter },
        data() {
            return {
                submitData: {
                    username: 'test@gmail.com',
                    password: '1234qwer',
                }
            }
        },
        mounted() {
            if (isLogin()) {
                router.push('/');
                return;
            }
        },
        methods: {
            submit() {
                userLogin(this.submitData);
            }
        }
    }
</script>
<style lang="scss">
    @import './../assets/scss/config.scss';
    @import './../assets/scss/reset.scss';
    @import './../assets/scss/mixin.scss';
    .login {
        .login-header {
            width: 980px;
            height: 90px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 10px;
        }
        .login-container {
            width: 100%;
            min-height: 540px;
            .login-bg {
                width: 100%;
                left: 0;
                overflow: hidden;
                position: absolute;
                height: 580px;
                top: 0;
                right: 0;
                .login-bg-canvas {
                    background: url("/images/login-bg.jpeg") no-repeat left center;
                }
            }
            .login-middle {
                width: 980px;
                margin: 0 auto;
                display: block;
                position: relative;
                .login-right {
                    position: relative;
                    float: right;
                    width: 380px;
                    min-height: 540px;
                    display: block;
                    .login-form-box {
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 50%;
                        background: #fff;
                        padding: 30px 30px 20px;
                        min-height: 370px;
                        border-radius: 4px;
                        -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
                        box-shadow: 0 1px 6px rgba(0,0,0,.1);
                        .login-box-title {
                            position: relative;
                            padding-bottom: 16px;
                            font-size: 18px;
                            color: #111;
                            line-height: 1;
                            font-family: PingFangSC-Medium,"Microsoft YaHei",SimSun,Tahoma,Verdana,Arial,sans-serif;
                        }
                    }

                    .form_wrap {
                        dl {
                            padding: 8px 0;
                            clear: both;
                            margin: 0;
                            display: block;
                        }
                        .r_input {
                            position: relative;
                            width: 300px;
                            height: 28px;
                            padding: 5px 5px 5px 13px;
                            line-height: 28px;
                            border: 1px solid #ccc;
                            font-size: 14px;
                            color: #333;
                            display: inline-block;
                            vertical-align: middle;
                        }

                        .password {
                            width: 225px;
                            padding-right: 80px;
                            input {
                                border: none;
                                width: 200px;
                                height: 28px;
                                line-height: 28px;
                                outline: 0;
                                font-size: 14px;
                                background: #fff;
                            }

                            a {
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 80px;
                                height: 40px;
                                line-height: 40px;
                                text-align: center;
                                font-size: 12px;
                            }
                        }
                        .agreement-list {
                            margin-top: 5px;
                            color: #999;
                            line-height: 12px;
                            text-align: center;
                            a {
                                padding: 0 3px;
                                color: #999;
                                border-bottom: 1px dotted #999;
                            }
                        }
                        .submit-btn {
                            width: 100%;
                            height: 42px;
                            color: #fff;
                            font-size: 16px;
                            cursor: pointer;
                            text-align: center;
                            border: 0;
                            border-radius: 4px;
                            clear: both;
                            background-color: #FF9A14;
                            &:hover {
                                background-color: #CC7B10;
                            }
                        }
                    }
                }
            }

        }

    }
</style>
